<template>
	<!--忘记密码-->
	<view class="page-content">
		<view class="page-body">
			<!-- 忘记密码 -->
			<view class="login_input_box">
				<view class="input-group">
					<view class="input-row">
						<image class="icon-tb" src="/static/icon/icon-sj.png"></image>
						<input class="input-row-w" type="number" v-model="formdata.mobile" :placeholder="i18n.forget.plaPho"
							></input>
					</view>
					<view class="input-row-code">
						<view class="input-row-code-l">
							<image class="icon-tb" src="/static/icon/icon-yzm.png"></image>
							<input type="number" class="input-row-w" clearable v-model="formdata.sms_code" :placeholder="i18n.forget.plaCode" :maxLength="6"></input>
						</view>
						<view class="input-row-code-r">
							<button size="mini" :disabled="btnDis" @tap="sendCode">{{i18n.forget.btnText}}</button>
						</view>
					</view>
					<view class="input-row">
						<image class="icon-tb" src="/static/icon/icon-mm.png"></image>
						<input class="input-row-w" type="password" v-model="formdata.pass" :placeholder="i18n.forget.plaPsd"
							 displayable="true"></input>
					</view>
					<view class="input-row">
						<image class="icon-tb" src="/static/icon/icon-mm.png"></image>
						<input class="input-row-w" type="password" v-model="formdata.pass_two" :placeholder="i18n.forget.plaPsd2"
							 displayable="true"></input>
					</view>
			
					<view class="btn-row">
						<button type="primary" class="primary" @tap="register">{{i18n.forget.names}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		sendSmss,resetPasss
	} from '@/common/api.js'
	export default {
		components: {
		},
		data() {
			return {
				btnText:'获取验证码',
				btnDis:false,
				formdata:{
					mobile: '',
					sms_code:'',
					pass: '',
					sms_type:'1314',
					pass_two:'',
					type:'1314'
				}
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onShow() {
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.i18n.tabBar.forget
			});
		},
		onLoad() {
			console.log(1234)
			this.formdata.sms_code = '9999';
		},
		methods: {
			register(){
				let resdata = this.formdata;
				if (resdata.mobile === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.pass === "" || resdata.pass_two === "") {
					uni.showToast({
						title: "请输入密码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.pass !== resdata.pass_two) {
					uni.showToast({
						title: "两次密码输入不一致！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				resetPasss(resdata).then(res =>{
					console.log(333,res)
					if(res.code === 2000){
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					
				})
			},
			// 发送验证码
			async sendCode() {
				let resdata = this.formdata;
				if (resdata.phone === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				sendSmss(resdata).then(res =>{
					if(res.code === 2000){
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
				// 开启倒计时
				this.countDown();
			},
			
			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.$t('message').forget.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.$t('message').forget.btnText = this.$t('message').forget.btnText2;
						this.btnDis = false;
						return;
					}
					timer--;
					this.$t('message').forget.btnText = `${timer}s`;
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.icon-tb {
		width: 24rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.login_input_box {
		display: flex;
		flex: 1;
	
		.input-group {
			display: flex;
			flex: 1;
			flex-direction: column;
			padding: 30rpx 120rpx 0 120rpx;
	
			.input-row {
				display: flex;
				align-items: center;
				flex: 1;
				width: 100%;
				height: 84rpx;
				border-bottom: 1rpx solid rgba(210,210,210,.4);
				flex-direction: row;
				background: $uni-bg-color;
				margin-top: 40rpx;
	
	
				.input-row-w {
					display: flex;
					flex: 1;
					height: 84rpx;
					width: 100%;
					color: $font-color-w;
					font-size: 28rpx;
				}
			}
			
			.input-row-code {
				width: 100%;
				display: flex;
				align-items: center;
				flex: 1;
				height: 84rpx;
				flex-direction: row;
				background: $uni-bg-color;
				margin-top: 40rpx;
				border-bottom: 1rpx solid rgba(210,210,210,.4);
			
				.input-row-code-l {
					flex: 65;
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					.input-row-w {
						display: flex;
						flex: 1;
						width: 100%;
						color: $font-color-w;
						font-size: 28rpx;
					}
				}
			
				.input-row-code-r {
					flex: 35;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
			
					button {
						width: 200rpx;
						height: 84rpx;
						line-height: 84rpx;
						padding: 0 10rpx;
						font-size: 28rpx;
						background: (0,0,0,0);
						border-radius: 0rpx;
						color: #fff;
					}
			
				}
			}
	
			.tips {
				padding-left: 20rpx;
				margin-top: 20rpx;
				color: #8c8c8c;
				font-size: 26rpx;
			}
	
			.btn-row {
				margin-top: 90rpx;
	
				button {
					line-height: 84rpx;
					background: $uni-but-bg-color;
					font-size: 36rpx;
					color: $font-color-w;
					height: 84rpx;
					box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.19);
					border-radius: 42rpx;
				}
			}
	
			.psd-reg {
				display: flex;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 28rpx;
				margin-top: 30rpx;
				color: #868686;
	
				view {
					flex: 1;
					text-align: center;
				}
			}
		}
	}
	.page-content {
		display: flex;
		flex-direction: column;
		width: 100vw;
	}

	.page-body {
		height: 100%;
		background-color: $uni-bg-color;
	}
</style>
